import { Key, useRef } from 'react'
import { ProZoomTable } from '@zoom-design/zoom-design-demo'
// import I18n from '/@/wms/locale/locale.tsx'
// const i18n = I18n.i18n
import { useTranslation } from 'react-i18next'
import { Space } from 'antd'
import { ColumnsState, ProColumns } from '@ant-design/pro-components'
import TypeModal from '/@/wms/pages/type-manage/type-modal.tsx'
import { MinusCircleTwoTone, PlusCircleTwoTone } from '@ant-design/icons'

// import { ResizeableTitle } from '/@/wms/pages/home/ResizeableTitle.tsx'

/**
 *  表格列配置
 */
interface DataType {
  key: Key
  typeKey?: string
  typeValue?: string
  parentKey?: string
  sort?: string
  typeDesc?: string
}

/**
 *  表格
 * @constructor
 */
const TypeManageTable = () => {
  // const { t,language } = I18n.i18n
  const { t } = useTranslation()
  const actionRef = useRef()
  const columnsInit: ProColumns<DataType>[] = [
    {
      title: t('键名称'),
      dataIndex: 'typeKey',
      key: 'typeKey',
      width: 100,
    },
    {
      title: t('键值'),
      dataIndex: 'typeValue',
      key: 'typeValue',
      width: 100
    },
    {
      title: t('父键'),
      dataIndex: 'parentKey',
      key: 'parentKey',
      width: 100,
      hideInSearch: true
    },
    {
      title: t('排序'),
      dataIndex: 'sort',
      key: 'sort',
      width: 100,
      hideInSearch: true
    },
    {
      title: '描述',
      dataIndex: 'typeDesc',
      key: 'typeDesc',
      width: 200,
      hideInSearch: true
    },
    {
      dataIndex: 'action',
      hideInSetting: true,
      search: false,
      fixed: 'right',
      width: 100,
      render: (text, record) => {
        return (
          <>
            <Space>
              <TypeModal title={'编辑'} record={record} />
            </Space>
          </>
        )
      }
    }
  ]

  /**
   *  列配置
   * @param dataIndex 列数据在数据项中对应的 key，支持 a.b.c 的嵌套写法
   * @param title 列标题
   * @param width 列宽度
   * @param fixed 列是否固定在左侧或者右侧，true 表示固定在左侧
   */

  const headerButtons = <TypeModal tableActionRef={actionRef} title={'新建'} />
  return (
    <>
      <></>
      <ProZoomTable<DataType>
        rowKey={'id'}
        actionRef={actionRef}
        zoomColumns={columnsInit}
        url={'/type-manage/tree-list-search'}
        headerTitle={headerButtons}
        pagination={false}
        expandable={{
          fixed: 'right',
          expandIcon: ({ expanded, onExpand, record }) =>
            expanded ? (
              <MinusCircleTwoTone onClick={e => onExpand(record, e)} />
            ) : (
              <PlusCircleTwoTone onClick={e => onExpand(record, e)} />
            )

        }}
        // components={
        //   {
        //     header: { cell: ResizeableTitle }
        //   }
        // }
        columnsState={{
          onChange: (value: Record<string, ColumnsState>) => {
            console.log(value)
            return value
          }
        }}
      />
    </>
  )
}

export default TypeManageTable
